<script>
import TableContainerList from '@/mixins/tableContainerList'
import AjaxStore from '@/utils/store/proxyAjax'

export default {
  name: 'fieldConfig',
  mixins: [TableContainerList],
  inject: ['Dialog'],
  props: {
    userIds: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    tableId: {
      type: String,
      default: ''
    },
    allFields: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // main
      isShowTitle: false, // 是否显示title
      pidKey: 'tableId',
      tableUniqueId: 'ename',

      store: new AjaxStore({
        url: '/v1/yq/datagroup/getFieldByTableId'
      }),
      columns: [
        {
          prop: 'cname',
          label: '字段中文名称',
          sortable: true,
          'min-width': '240',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'ename',
          label: '字段英文名称',
          sortable: true,
          'min-width': '240',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        }
      ],
      toolPanelBtnList: [
        {
          label: '全选',
          methods: 'handleAllSelect',
          url: '',
          icon: 'el-icon-circle-check-outline',
          type: 'primary',
          disabled: false
        },
        {
          label: '取消全选',
          methods: 'handleClearAllSelect',
          url: '',
          icon: 'el-icon-circle-close-outline',
          type: 'primary',
          disabled: false
        }
      ],

      inputPlaceholder: '输入字段名称搜索',

      // containerList
      containerList: [],
      containerListTitle: '已分配字段',
      titleKey: '',
      titleValue: ''
    }
  },
  mounted() {
    this.handleInit()
  },
  watch: {
    userIds: 'handleInit',
    data: {
      handler() {
        this.handleCheckCheckbox()
      }
    },
    'Dialog.visible': {
      immediate: true,
      handler(val) {
        val &&
          this.$nextTick(() => {
            this.store._searchParams = {}
            this.$refs.table.load(1, this.store.limit)
          })
      }
    }
  },
  methods: {
    handleInit() {
      this.containerList = JSON.parse(JSON.stringify(this.userIds))
      this.handleCheckCheckbox()
    },
    // 全选
    handleAllSelect() {
      this.store.data.forEach(item =>
        this.$refs.table.toggleRowSelection(item, true)
      )
      // 要去重
      this.containerList = this.allFields
    },
    // 取消全选
    handleClearAllSelect() {
      this.store.data.forEach(item =>
        this.$refs.table.toggleRowSelection(item, false)
      )
      this.containerList = []
    },
    handleInputClick(ev, val) {
      const params = {}
      params.q_cname = val
      this.store._searchParams = params
      this.$refs.table.load(1, this.store.limit)
    },
    // eslint-disable-next-line
    formaterTagContent(item) {
      return item.ename + '-' + item.cname
    }
  }
}
</script>
